<script lang="ts" setup>
import { saveConsultOrder, uploadImage } from '@/apis/quickEntry'
import useConsultStore from '@/stores/consult'
import type { QuickEntryParams } from '@/types/quickEntry'
import { computed, ref } from 'vue'

// 先定义 props
const props = defineProps<{
  type: string
  illnessType: string
  depId: string
}>()

// 再定义 formData
const formData = ref<
  Pick<
    QuickEntryParams,
    'illnessDesc' | 'illnessTime' | 'consultFlag' | 'pictures' | 'type' | 'illnessType' | 'depId'
  >
>({
  illnessDesc: '',
  illnessTime: null,
  consultFlag: null,
  pictures: [],
  illnessType: null,
  depId: props.depId,
  type: null, // 转换成数字类型
})

// 点击下一步
const nextStep = () => {
  store.illnessInfo = formData.value
  store.illnessInfo.type = Number(props.type)
  store.illnessInfo.illnessType = Number(props.illnessType)
  store.illnessInfo.depId = props.depId
  uni.navigateTo({
    url: '/subpkg/pages/list/list?type=consult',
  })
}

// 是否禁用下一步
const isDisabled = computed(() => {
  return (
    !formData.value.illnessDesc ||
    !formData.value.illnessTime ||
    formData.value.pictures?.length === 0
  )
})

// 上传图片
const upLoadImage = async (e: UniHelper.UniFilePickerOnSelectEvent) => {
  // console.log('e', e)
  const res = await uploadImage(e.tempFilePaths[0])
  console.log('res', res)
  formData.value.pictures?.push(res.data)
}

// 删除图片
const deleteImage = (e: UniHelper.UniFilePickerOnDeleteEvent) => {
  // console.log('e', e)
  formData.value.pictures?.splice(e.index, 1)
}

// 问诊-保存/修改问诊订单
// const saveconsultOrder = async () => {
//   const res = await saveConsultOrder(formData.value)
//   console.log('res', res)
// }

const store = useConsultStore()
if (store.illnessInfo.illnessDesc !== '') {
  uni.showModal({
    title: '温馨提示',
    content: '是否恢复之前填写的病情信息？',
    confirmText: '确认',
    confirmColor: '#16C2A3',
    cancelColor: '#848484',
    success: (res) => {
      if (res.confirm) {
        formData.value = store.illnessInfo
      }
    },
  })
}
</script>

<template>
  <scroll-view>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            v-model="formData.illnessDesc"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            class="tag"
            :class="{ active: formData.illnessTime === 1 }"
            @click="formData.illnessTime = 1"
            >一周内</text
          >
          <text
            class="tag"
            :class="{ active: formData.illnessTime === 2 }"
            @click="formData.illnessTime = 2"
            >一个月内</text
          >
          <text
            class="tag"
            :class="{ active: formData.illnessTime === 3 }"
            @click="formData.illnessTime = 3"
            >半年内</text
          >
          <text
            class="tag"
            :class="{ active: formData.illnessTime === 4 }"
            @click="formData.illnessTime = 4"
            >大于半年</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            class="tag"
            :class="{ active: formData.consultFlag === 1 }"
            @click="formData.consultFlag = 1"
            >就诊过</text
          >
          <text
            class="tag"
            :class="{ active: formData.consultFlag === 0 }"
            @click="formData.consultFlag = 0"
            >没有就诊过</text
          >
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          v-model="formData.pictures"
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
          @select="upLoadImage"
          :auto-upload="false"
          @delete="deleteImage"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" :disabled="isDisabled" @click="nextStep">下一步</button>
    </view>
  </scroll-view>
  {{ formData }}
</template>

<style lang="scss">
@import './index.scss';
</style>
